import React from 'react'
import Tree from 'react-d3-tree'
import { Badge, Tooltip } from 'antd'

const containerStyles = {
  width: '100%',
  height: '100vh',
}

class ProgramBinaryTreeBox extends React.PureComponent {

  state = {
    translate: {}
  }

  componentDidMount () {
    const dimensions = this.treeContainer.getBoundingClientRect()
    this.setState({
      translate: {
        x: dimensions.width / 5,
        y: dimensions.height / 5
      }
    })
  }

  findChildren = node => {
    return this.props.diffPrograms.filter(item => item.fromId === node.programId) || []
  }

  createNode = ({title, programId, operateTime}) => {
    const {sourceProgramId, diffProgramId} = this.props
    let fill = 'gray'
    if (sourceProgramId === programId) fill = 'green'
    if (sourceProgramId === diffProgramId) fill = 'red'
    return {
      name: title,
      attributes: {
        programId,
        createTime: operateTime
      }, nodeSvgShape: {
        shapeProps: {
          shape: 'none',
          width: 20,
          height: 20,
          x: -10,
          y: -10,
          fill
        },
      },
      children: []
    }
  }

  fillData = (treeNode, currentProgram) => {
    let childrenPrograms = this.findChildren(currentProgram)

    if (childrenPrograms && childrenPrograms.length > 0) {
      childrenPrograms.forEach(program => {
        let childrenNode = this.createNode(program)
        treeNode.children.push(childrenNode)
        this.fillData(childrenNode, program)
      })
    }
  }

  formatTreeData = () => {
    const {diffPrograms} = this.props
    const rootProgram = diffPrograms.find(item => item.fromId === 0)
    if (rootProgram) {
      let rootNode = this.createNode(rootProgram)
      this.fillData(rootNode, rootProgram)
      return rootNode
    }

    return []
  }

  render () {
    const treeData = this.formatTreeData()
    const {sourceProgramId, diffProgramId} = this.props
    return <div id='tree' style={containerStyles} ref={tc => (this.treeContainer = tc)}>

      <Tree data={treeData}
            orientation='vertical'
            zoomable={false}
            translate={this.state.translate}
            allowForeignObjects
            nodeLabelComponent={{
              render: <NodeLabel sourceProgramId={sourceProgramId}
                                 diffProgramId={diffProgramId}/>,

            }}
            onClick={node => this.props.updateDiffProgramId(node.attributes.programId)}/>
    </div>
  }
}

class NodeLabel extends React.PureComponent {
  render () {
    const {nodeData, sourceProgramId, diffProgramId} = this.props
    const {programId} = nodeData.attributes
    let alertText = null
    if (programId === parseInt(sourceProgramId)) alertText = '「当前训练营」'
    if (programId === parseInt(diffProgramId)) alertText = '「diff 训练营」'

    let status = 'default'
    if (programId === parseInt(sourceProgramId)) status = 'processing'
    if (programId === parseInt(diffProgramId)) status = 'warning'
    return (
      <div>
        <Tooltip title={alertText}>
          <Badge status={status} text={nodeData.name} style={{fontSize: 14}}/>
        </Tooltip>
      </div>
    )
  }
}

export default ProgramBinaryTreeBox